<template>
  <div class="margin1-top">
    <div class="title-row">
      <div class="title-left">主管单位</div>
      <div v-for="(item,index) in zgdw"><a :class = "{blue: changeZgdw == index}" @click = "change1(index)">{{item.name}}</a></div>
    </div>
    <div class="title-row">
      <div class="title-left">建设性质</div>
      <div v-for="(item,index) in jsxz"><a :class = "{blue: changeJsxz == index}" @click = "change2(index)">{{item.name}}</a></div>
    </div>
    <div class="title-row">
      <div class="title-left">投资形式</div>
      <div v-for="(item,index) in gllx"><a :class = "{blue: changeGllx == index}" @click = "change3(index)">{{item.name}}</a></div>
    </div>
    <div class="title-row">
      <div class="title-left">年份</div>
      <div v-for="(item,index) in nf"><a :class = "{blue: changeNf == index}" @click = "change4(index)">{{item.name}}</a></div>
    </div>
     <div class="title">
      <span>项目信息管理</span>
    </div>
    <div class="subtitle" >
      <span>排序选择</span>
      <span>时间 <i class="el-icon-bottom"></i></span>
    </div>
    <el-table :data="list" border style="width: 100%">
          <el-table-column prop="nf" label="年份" >          </el-table-column>
          <el-table-column prop="title" label="项目名称">
            <template slot-scope="scope">
              <a
                href="#/biddetail"
                target="_blank"
                v-if="scope.row.title == '襄阳市疾病预防控制中心迁建项目'"
                style="color: blue"
                >{{ scope.row.title }}</a
              >
              <a v-else>{{ scope.row.title }}</a>
            </template>
          </el-table-column>
          <el-table-column prop="dm" label="项目代码" >
          </el-table-column>
          <el-table-column prop="gljb" label="管理级别"> </el-table-column>
          <el-table-column prop="zgdw" label="主管单位">
          </el-table-column>
          <el-table-column prop="tzxs" label="投资形式">
          </el-table-column>
          <el-table-column prop="jsxz" label="建设性质"></el-table-column>
           <el-table-column prop="xmlx" label="项目类型" />
           <el-table-column prop="kgqk" label="控股情况" />
           <el-table-column prop="jhtz" label="计划投资" />
           <el-table-column prop="ljtz" label="累计投资" />
           <el-table-column prop="bntz" label="本年投资" />
           <el-table-column prop="nmjy" label="上年未结余" />
         
         <el-table-column prop="bnzjy" label="本年资金来源" />
         <el-table-column prop="gjys" label="国家预算资金" />
          <el-table-column prop="gndk" label="国内贷款" />
           <el-table-column prop="zczj" label="自筹资金" />
            <el-table-column prop="yfzj" label="应付款资金" />
        </el-table>
    <!-- <div>
      <card-list :list="list" :no = "1">
        <el-row :gutter="21" style="display: flex; justify-content: center; flex-wrap: wrap;">
          <el-col :span="7" v-for="(item,index) in list" :key="index">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <router-link to="/biddetail"><span style="display: flex; justify-content: center; align-items: center; color: blue;">{{item.title}}</span></router-link>
              </div>
              <div style="width: 100%;">
                <el-col style="margin-bottom: 15px;">
                  <div class="box" v-for="(item2, index) in item.tableArr" :key="index">
                    <div class="content1">{{ item2.key }}</div>
                    <div class="content2">{{ item2.value == "" ? "待完善" : item2.value }}</div>
                  </div>
                </el-col>
              </div>
              <div class="text item btn_1">
                <el-button style="width: 50%;" type="primary" plain @click="sjbxz">{{item.btn1}}</el-button>
                <el-button style="width: 50%;" type="primary" plain @click="zlxz">{{item.btn2}}</el-button>
              </div>
              <div class="text item">
                <el-button style="width: 100%;" type="primary" plain @click= "sjxx">{{item.btn3}}</el-button>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </card-list>
    </div> -->
  </div>
</template>
<script>
  import cardList from '@/components/card/index.vue'

  export default {
    data() {
      return {

        changeZgdw: 0,
        changeJsxz: 0,
        changeGllx: 0,
        changeNf: 0,
        zgdw: [{
            no: 1,
            name: "不限",
            active: true
          },
          {
            no: 2,
            name: "市财政局",
            active: false
          },
          {
            no: 3,
            name: "市科技局",
            active: false
          },
          {
            no: 4,
            name: "市人社局",
            active: false
          },
          {
            no: 5,
            name: "市招商局",
            active: false
          },
          {
            no: 6,
            name: "市自然规划局",
            active: false
          }],

          jsxz: [
            {
              no: 1,
              name: "不限"
            },
            {
              no: 2,
              name: "新建项目"
            },
            {
              no: 3,
              name: "续建项目"
            },
            {
              no: 4,
              name: "扩建项目"
            },
            {
              no: 5,
              name: "恢复项目"
            }
          ],
          gllx: [
            {
              no: 1,
              name: "不限"
            },
            {
              no: 2,
              name: "直接投资"
            },
            {
              no: 3,
              name: "资本金注入方式投入"
            },
            {
              no: 4,
              name: "纳入市本级政府年度投资计划统筹管理"
            },
            {
              no: 5,
              name: "投资补助"
            },
            {
              no: 6,
              name: "贷款贴息"
            },
          ],

          nf: [
            {
              no: 1,
              name: "不限"
            },
            {
              no: 2,
              name: "2018年"
            },
            {
              no: 3,
              name: "2019年"
            },
            {
              no: 4,
              name: "2020年"
            },
            {
              no: 5,
              name: "2021年"
            }
          ],

        list: [{
            nf:"2020",
            title: "襄阳市疾病预防控制中心迁建项目",
            dm: "XY_0001",
            gljb:"市本级",
            zgdw:"市财政局",
            tzxs:"直接投资",
            jsxz:"新建",
            xmlx:"应急抢救项目",
            kgqk:"20%",
            jhtz:"2000万",
            ljtz:"1亿",
            bntz:"500万",
            nmjy:"200万",
            bnzjy:"招商",
            gjys:"3000万",
            gndk:"1000万",
            zczj:"1300万",
            yfzj:"2500万"
          },
          {
            nf:"2020",
            title: "襄阳市疾病预防控制中心迁建项目",
            dm: "XY_0001",
            gljb:"市本级",
            zgdw:"市财政局",
            tzxs:"直接投资",
            jsxz:"新建",
            xmlx:"应急抢救项目",
            kgqk:"20%",
            jhtz:"2000万",
            ljtz:"1亿",
            bntz:"500万",
            nmjy:"200万",
            bnzjy:"招商",
            gjys:"3000万",
            gndk:"1000万",
            zczj:"1300万",
            yfzj:"2500万"
          },
          {
            nf:"2020",
            title: "襄阳市疾病预防控制中心迁建项目",
            dm: "XY_0001",
            gljb:"市本级",
            zgdw:"市财政局",
            tzxs:"直接投资",
            jsxz:"新建",
            xmlx:"应急抢救项目",
            kgqk:"20%",
            jhtz:"2000万",
            ljtz:"1亿",
            bntz:"500万",
            nmjy:"200万",
            bnzjy:"招商",
            gjys:"3000万",
            gndk:"1000万",
            zczj:"1300万",
            yfzj:"2500万"
          },
          {
            nf:"2020",
            title: "襄阳市疾病预防控制中心迁建项目",
            dm: "XY_0001",
            gljb:"市本级",
            zgdw:"市财政局",
            tzxs:"直接投资",
            jsxz:"新建",
            xmlx:"应急抢救项目",
            kgqk:"20%",
            jhtz:"2000万",
            ljtz:"1亿",
            bntz:"500万",
            nmjy:"200万",
            bnzjy:"招商",
            gjys:"3000万",
            gndk:"1000万",
            zczj:"1300万",
            yfzj:"2500万"
          },
          {
            nf:"2020",
            title: "襄阳市疾病预防控制中心迁建项目",
            dm: "XY_0001",
            gljb:"市本级",
            zgdw:"市财政局",
            tzxs:"直接投资",
            jsxz:"新建",
            xmlx:"应急抢救项目",
            kgqk:"20%",
            jhtz:"2000万",
            ljtz:"1亿",
            bntz:"500万",
            nmjy:"200万",
            bnzjy:"招商",
            gjys:"3000万",
            gndk:"1000万",
            zczj:"1300万",
            yfzj:"2500万"
          },
           {
            nf:"2020",
            title: "襄阳市疾病预防控制中心迁建项目",
            dm: "XY_0001",
            gljb:"市本级",
            zgdw:"市财政局",
            tzxs:"直接投资",
            jsxz:"新建",
            xmlx:"应急抢救项目",
            kgqk:"20%",
            jhtz:"2000万",
            ljtz:"1亿",
            bntz:"500万",
            nmjy:"200万",
            bnzjy:"招商",
            gjys:"3000万",
            gndk:"1000万",
            zczj:"1300万",
            yfzj:"2500万"
          },
           {
            nf:"2020",
            title: "襄阳市疾病预防控制中心迁建项目",
            dm: "XY_0001",
            gljb:"市本级",
            zgdw:"市财政局",
            tzxs:"直接投资",
            jsxz:"新建",
            xmlx:"应急抢救项目",
            kgqk:"20%",
            jhtz:"2000万",
            ljtz:"1亿",
            bntz:"500万",
            nmjy:"200万",
            bnzjy:"招商",
            gjys:"3000万",
            gndk:"1000万",
            zczj:"1300万",
            yfzj:"2500万"
          },
          
         
        ]
      }
    },
    components: {
      cardList
    },

    methods: {
      sjbxz(){
        alert("数据包正在下载！");
      },
      zlxz(){
        alert("附件资料下载！");
      },
      sjxx(){
        alert("审计信息！");
      },

      change1(index){
        this.changeZgdw = index
      },
      change2(index){
        this.changeJsxz = index
      },
      change3(index){
        this.changeGllx = index
      },
      change4(index){
        this.changeNf = index
      }
    }
  }

</script>
<style lang="scss" scoped>
  .margin1-top{
    margin-top: 65px;
  }

   .title-row {
    background-color: #F3F3F3;
    display: flex;
    align-items: center;
  }
  .title-row div{
      padding: 10px;
  }

  .title-left {
    background-color: #DBDBDB;
    width: 200px;
    text-align: center;
  }

  .text {
    font-size: 14px;
  }
  .title {
  font-size: 25px;
  color: #000000;
  font-weight: 600;
  padding: 10px 0;
  border-bottom: 5px solid #000;
}
.subtitle{
    padding: 10px 0;
}
.subtitle span:first-child{
  background-color:pink;
  padding: 5px;
}

.subtitle span:last-child{
  background-color:palevioletred;
  padding: 5px;
  color: white;

}

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 360px;
    margin: 10px;
  }

  #app {
    width: 100%;
    padding: 10px;
  }

  .box {
    width: 100%;
    height: 40px;
    display: flex;
    border-left: 1px solid #e9e9e9;
    border-top: 1px solid #e9e9e9;
  }

  .content1 {
    width: 50%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-right: 1px solid #e9e9e9;
    border-bottom: 1px solid #e9e9e9;
    color: #333;
    font-size: 14px;
  }

  .content2 {
    width: 50%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #fff;
    border-right: 1px solid #e9e9e9;
    border-bottom: 1px solid #e9e9e9;
    color: #b0b0b2;
    font-size: 14px;
  }

  .btn_1 {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .head_btn {
    display: flex;
    justify-content: center;
  }

  .tb_cls {
    margin-top: 20px;
  }

  .card_cls {
    margin-top: 10px;
  }
  .blue {
    color: blue;
  }

</style>
